<template>
  <div class="foot">
    <div @click="toPage(item.path)" class="item" v-for="(item, index) in navList" :key="index">
      <i :class="`${item.name === nowPage ? 'active' : ''} iconfont ${item.image}`"></i>
      <span :class="{'active': item.name === nowPage}">{{ item.name }}</span>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';
import { useRouter } from 'vue-router';
// 页面跳转
const router = useRouter()
// 底部导航列表
const navList = [
  {
    image: 'icon-shouye',
    name: '首页',
    path: '/home'
  },
  {
    image: 'icon-robot-2-line',
    name: 'AI规划',
    path: '/aiplan'
  },
  {
    image: 'icon-luxian',
    name: '行程',
    path: '/plan'
  },
  {
    image: 'icon-wode',
    name: '我的',
    path: '/person'
  }
]
// 判断当前是哪个页面，然后变换底部颜色
const nowPage = ref('首页')
// 接收父组件跳转页面后的路径
const props = defineProps({
  toUrl: {
    type: String,
    default: '/home'
  }
})
// 首页点击ai规划跳转，底部图标随之改变
watch(() => props.toUrl, (newVal, oldVal) => {
  // console.log(newVal);
  nowPage.value = navList.filter(item => item.path === newVal)[0].name
})

const toPage = (path) => {
  nowPage.value = navList.filter((item) => item.path === path)[0].name
  console.log();
  router.push({path: path})
}
</script>

<style lang="less" scoped>
.foot{
  width: 100%;
  background-color: #fff;
  padding: 12px 35px 0 35px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-around;
  position: fixed;
  bottom: 0;
  height: 1.5rem;
  .item{
    display: grid;
    color: #9CA3AF;
    i{
      font-size: 0.55rem;
      margin: 0 auto;
    }
    span{
      font-weight: 400;
      font-size: 0.32rem;
      line-height: 16px;
    }
    .active{
      color: #3176FF;
    }
  }

}
</style>